import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtIcon } from 'taro-ui'
import './index.scss'

interface CustomNavBarProps {
  title: string
  showBack?: boolean
}

export default function CustomNavBar({ title, showBack = false }: CustomNavBarProps) {
  const handleBack = () => {
    Taro.navigateBack()
  }
  // 获取系统信息
  let statusBarHeight = 0
  
  try {
    const systemInfo = Taro.getSystemInfoSync()
    statusBarHeight = systemInfo.statusBarHeight || 0
  } catch (error) {
    console.error('获取系统信息失败:', error)
  }
  
  // 导航栏内容高度
  const navBarContentHeight = 44 // 标准导航栏高度 44px
  // 总高度 = 状态栏 + 导航栏内容
  const totalHeight = statusBarHeight + navBarContentHeight

  return (
    <View 
      className='custom-nav-bar'
      style={{
        paddingTop: `${statusBarHeight}px`
      }}
    >
      <View 
        className='nav-bar-content'
        style={{
          height: `${navBarContentHeight}px`
        }}
      >
        {showBack && (
          <View className='nav-bar-back' onClick={handleBack}>
            <AtIcon value='chevron-left' size='20' color='#333' />
          </View>
        )}
        <Text className='nav-bar-title retro-font'>{title}</Text>
      </View>
    </View>
  )
}

